import React, { useState, useEffect, useContext } from "react";
import { View, StyleSheet, Dimensions, Modal as RNModal, StatusBar, Text, Image, TouchableOpacity } from "react-native";
import Modal from "react-native-modal";
import crypto from "crypto";
import { InputView, Keyboard } from 'react-native-pay-password';
import Toast from 'react-native-simple-toast'
import CommonContext from '@/utils/createContext'
import LogoImg from "@/assets/imgs/logo.png";
import { getValue } from "@/utils/deviceStorage";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const LockScreenEnter = (props) => {

    const [pwd, setPwd] = useState('')
    const [savePwd, setSavePwd] = useState('')
    const [keyBoardVisible, setKeyBoardVisible] = useState(false)
    const [tipVisible, setTipVisible] = useState(false)
    const { modalVisible, setModalVisible, handleClose } = useContext(CommonContext)

    useEffect(() => {
        let str = getValue('lockPwd')
        setSavePwd(str)
    }, []);

    const onDone = (pwd) => {
        let str = crypto.createHash('md5').update(pwd).digest('hex')
        if (str == savePwd) {
            if (typeof (handleClose) == 'function') {
                handleClose()
            } else {
                setModalVisible(false)
            }
        } else {
            Toast.showWithGravity(
                'Incorrect password',
                Toast.SHORT,
                Toast.CENTER)
            setPwd('')
            show()
        }
    }

    const onPress = (text) => {
        let nextPwd = pwd + text;
        if (nextPwd.length <= 6) {
            setPwd(nextPwd);
            if (nextPwd.length === 6) {
                onDone && onDone(nextPwd)
                hide()
            }
        }
    };

    const onDelete = () => {
        setPwd(pwd.substring(0, pwd.length - 1));
    }

    const show = () => {
        setPwd('')
        setKeyBoardVisible(true)
    };

    const hide = () => {
        setKeyBoardVisible(false)
    };

    const handlePressForget = () => {
        setTipVisible(true)
    }

    return (
        <RNModal
            style={{ zIndex: 99 }}
            animationType="none"
            transparent={true}
            visible={modalVisible}
            onRequestClose={() => { }}>
            <View style={styles.container}>
                <StatusBar backgroundColor='#FFFFFF' barStyle='dark-content' />
                <Text style={styles.title1}>Please enter your password</Text>
                <Text style={{ ...styles.title2, marginTop: 11 * ratio }}>
                    All those who ask you for mnemonic words and websites are liars!
                </Text>
                <Text style={styles.title2}>
                    All QQ and telegraph groups are fake groups!
                </Text>
                <View style={styles.pwdContent}>
                    <TouchableOpacity onPress={show} activeOpacity={0.8}>
                        <InputView
                            borderColor='#888888'
                            value={pwd}
                        />
                    </TouchableOpacity>
                </View>
                <View style={{ width: width, alignItems: 'flex-end', marginTop: 12 * ratio }}>
                    <TouchableOpacity onPress={handlePressForget}>
                        <Text style={{ ...styles.title4, marginRight: 40 * ratio }}>Forget passwordz?</Text>
                    </TouchableOpacity>
                </View>
                <View style={{ flex: 1, justifyContent: 'flex-end', marginBottom: 40 * ratio }}>
                    <View style={{ flexDirection: 'row' }}>
                        <Image source={LogoImg} style={{ width: 20 * ratio, height: 18 * ratio }} />
                        <Text style={styles.title3}>Sectoken</Text>
                    </View>
                </View>
                {keyBoardVisible && <Keyboard onPress={onPress} onDelete={onDelete} />}
            </View >
            <Modal
                isVisible={tipVisible}
                backdropColor='#000000'
                backdropOpacity={0.34}
                style={styles.tipContainer}
            >
                <View style={styles.tipBodyContent}>
                    <View style={{ flex: 1 }}>
                        <View style={{ marginTop: 32 * ratio }}>
                            <Text style={{ ...styles.title4, width: 242 * ratio, color: '#646464', marginLeft: 15 * ratio }}>
                                After the password is lost, you can use mnemonics to reset the password. Are you sure to reset it?
                            </Text>
                        </View>
                        <View style={styles.tipDivider1}></View>
                        <View style={{ width: 270 * ratio, flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center' }}>
                            <TouchableOpacity onPress={() => { setTipVisible(false) }}
                                style={{ flex: 5, alignItems: 'center' }}>
                                <Text style={{ ...styles.title4, color: '#646464' }}>Cancel</Text>
                            </TouchableOpacity>
                            <View style={styles.tipDivider2}></View>
                            <TouchableOpacity onPress={() => { props.navigation.navigate('reset-pwd') }}
                                style={{ flex: 5, alignItems: 'center' }}>
                                <Text style={{ ...styles.title4, color: '#FF6600' }}>Confirm</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        </RNModal>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        alignItems: 'center'
    },
    pwdContent: {
        flexDirection: 'row',
        marginTop: 11 * ratio,
        justifyContent: 'center'
    },
    title1: {
        fontSize: 24,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#646464',
        lineHeight: 31,
        marginTop: 70 * ratio
    },
    title2: {
        fontSize: 10,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#E72C0E',
        lineHeight: 14
    },
    title3: {
        fontSize: 14,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#DADAE3',
        lineHeight: 19,
        marginLeft: 7 * ratio
    },
    title4: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#0986FF',
        lineHeight: 15
    },
    tipContainer: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    tipBodyContent: {
        width: 270 * ratio,
        height: 145 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 5
    },
    tipDivider1: {
        width: 270 * ratio,
        height: 0,
        borderWidth: 1,
        borderColor: '#E4E4E4',
        marginTop: 27 * ratio
    },
    tipDivider2: {
        width: 0,
        height: 38 * ratio,
        borderWidth: 1,
        borderColor: '#E4E4E4'
    }
})
export default LockScreenEnter